<!--
 * @Author: sjt
 * @Date: 2022-10-25 13:18:12
 * @LastEditors: sjt
 * @LastEditTime: 2024-09-29 11:07:51
 * @Description: file content
-->
<template>
    <div class="cirChart" ref="cirChartRef"></div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'
import * as echarts from 'echarts'
import wordMap from '@/assets/wordMap.json'
let charts = null
const cirChartRef = ref(null)
const initChart = (datas) => {
    console.log(datas)
    echarts.registerMap('world', wordMap);
    // var allData = {
    //     citys: [
    //         { name: '美国', value: [-118.24311, 34.052713,100], },
    //         { name: '澳大利亚', value: [149.08, -35.15, 2],},
    //         { name: '以色列', value: [35.12, 31.47, 4],},
    //         { name: '巴西', value: [-48.678945, -10.493623, 4], },
    //         { name: '泰国', value: [100.35, 13.45, 4], },
    //         { name: '沙特阿拉伯', value: [46.42, 24.41, 4] },
    //         { name: '新加坡', value: [103.51, 1.18, 4]},
    //         { name: '新西兰', value: [174.46, -41.19, 4], },
    //         { name: '阿根廷', value: [-60.0, -36.3, 4],},
    //         { name: '埃塞俄比亚', value: [38.42, 9.02, 4], },
    //         { name: '哥伦比亚', value: [-74.0, 4.34, 4],  },
    //     ],
    //     moveLines: [
    //         {
    //             fromName: '长春',
    //             toName: '美国',
    //             coords: [
    //                 [125.299633,43.914039],
    //                [-118.24311, 34.052713],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '澳大利亚',
    //             coords: [
    //                 [125.299633,43.914039],
    //                [149.08, -35.15],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '以色列',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [35.12, 31.47],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '巴西',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [-48.678945, -10.493623],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '泰国',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [100.35, 13.45],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '沙特阿拉伯',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [46.42, 24.41],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '新加坡',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [103.51, 1.18],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '新西兰',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [174.46, -41.19],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '阿根廷',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [-60.0, -36.3],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '埃塞俄比亚',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [38.42, 9.02],
    //             ],
    //         },
    //         {
    //             fromName: '长春',
    //             toName: '哥伦比亚',
    //             coords: [
    //                 [125.299633,43.914039],
    //                 [-74.0, 4.34],
    //             ],
    //         },
    //     ]
    // }
    // var cityData=[ { name: '长春', value: [125.299633,43.914039,10] }]
    let allData = {
        citys: datas.internationalArea.map(item => {
            return {
                name: item.name,
                value: [item.longitude, item.latitude]
            }
        }),
        moveLines: datas.internationalArea.map(item => {
            return {
                fromName: datas.productionBase[0].name,
                toName: item.name,
                coords: [
                    [datas.productionBase[0].longitude, datas.productionBase[0].latitude],
                    [item.longitude, item.latitude]
                ],

            }
        }),
    }
    let cityData = [{ name: datas.productionBase[0].name, value: [datas.productionBase[0].longitude, datas.productionBase[0].latitude] }]

    let option = {
        tooltip: {
            trigger: "item",
            formatter: function (params, ticket, callback) {
                if (params.seriesType == "effectScatter") {
                    return params.marker + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
                } else {
                    return params.name;
                }
            },
        },
        grid: {
        },
        geo: {
            map: 'world',
            aspectScale: 0.65, //长宽比
            zoom: 1.12,
            tooltip: {
                show: !1,
            },
            scaleLimit: {
                min: 1,
                max: 5,
            },
            label: {
                show: !1,
            },
            roam: false,
            itemStyle: {
                normal: {
                    shadowColor: "#164A7C",
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                },
            },
        },
        tooltip: {
            trigger: "item",
        },
        series: [{
            type: "map",
            roam: false,
            label: {
                show: !1,
            },
            tooltip: {
                show: !1,
            },
            itemStyle: {
                borderColor: "#3EC3E3",
                borderWidth: 0.2,
                areaColor: {
                    type: "radial",
                    x: 0.5,
                    y: 0.5,
                    r: 0.8,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#1867B5", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "#1867B5", // 100% 处的颜色
                        },
                    ],
                    globalCoord: true, // 缺省为 false
                },
                emphasis: {
                    label: {
                        // show: !1,
                        color: "#fff",
                    },
                    areaColor: "#0E83B7",
                    //    shadowColor: 'rgb(12,25,50)',
                    borderWidth: 0.2,
                },
            },
            aspectScale: 0.65, //长宽比
            zoom: 1.12,
            //     roam: false,
            map: "world", //使用
            // data: this.difficultData //热力图数据   不同区域 不同的底色
        },
        {
            name: '地点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                period: 1,
                brushType: "stroke",
                scale: 8
            },
            label: {
                normal: {
                    show: true,
                    position: "right",
                    color: "#9966cc",
                    formatter: "{b}",
                    textStyle: {
                        color: "#fff"
                    }
                },
                emphasis: {
                    show: true
                }
            },
            symbol: "pin",
            symbolSize: 20,
            itemStyle: {
                normal: {
                    show: true,
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "rgb(216, 167, 33)", // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "rgb(216, 167, 33)", // 100% 处的颜色
                            },
                        ],
                    },
                },
            },
            data: cityData,
        }, {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
                //涟漪特效
                period: 15, //动画时间，值越小速度越快
                brushType: "stroke", //波纹绘制方式 stroke, fill
                scale: 2, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: false,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: "{b}", //圆环显示文字
                    textStyle: {
                        color: "rgb(214,206,143)",
                    },
                },
            },
            emphasis: {
                show: true,
                scale: !0,
                label: {
                    show: true,
                    backgroundColor: "#000",
                    padding: 2,
                    borderRadius: 2,
                    color: "#fff",
                },
            },
            symbol: "circle",
            symbolSize: "6",

            itemStyle: {
                normal: {
                    show: false,
                    color: "#0FD1D9",
                },
            },
            data: allData.citys,
        },
        {
            name: '线路',
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            large: true,
            zlevel: 2,
            effect: {
                show: true,
                period: 4, // 箭头指向速度，值越小速度越快
                trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'pin', // 箭头图标
                symbolSize: 6, // 图标大小
            },
            lineStyle: {
                normal: {
                    color: '#1DE9B6',
                    width: 1, // 线条宽度
                    opacity: 0.1, // 尾迹线条透明度
                    curveness: 0.3, // 尾迹线条曲直度
                },
            },
            label: {
                normal: {
                    show: false,
                    position: 'middle',
                    formatter: '{b}'
                }
            },
            data: allData.moveLines,
        },
        ],
    }







    if (!charts) {
        charts = echarts.init(cirChartRef.value)
        charts.setOption(option)
    } else {
        charts.dispose()
        charts = echarts.init(cirChartRef.value)
        charts.setOption(option)
    }
    window.addEventListener('resize', () => {
        if (charts) {
            charts.resize()
        }
    })
}

defineExpose({
    initChart
})
</script>

<style lang="scss" scoped>
.cirChart {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: 5% center;
}
</style>
